<template>
	<view class="pageview">
		<cl-navbar :title="$t('my_file.setting.locale.title')" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		<view class="pageContent">
			<view class="cellviewGrop" v-for="(item,index) in locales" :key="index" @click="setLocales(item.code)">
				<view class="cellview" >
					<view class="cellview__left">
						<text class="cellview__left__title">{{item.text}}</text>
					</view>
					<view class="cellview__right">
						<image src="/static/icon/select.png" mode="" style="width: 36rpx;height: 36rpx;" v-if="locale == item.code"></image>
						<image src="/static/icon/no-select.png" mode="" style="width: 36rpx;height: 36rpx;" v-else></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'my_setting_locale',
		data() {
			return {
				locale: 'zh-Hans',
				locales: [
				    { text: 'English', code: 'en' },
					{ text: '简体中文', code: 'zh-Hans' },
					// { text: 'Español', code: 'es' },
					// { text: 'Français', code: 'fr' },
					// { text: 'Deutsch', code: 'de' },
					// { text: 'Italiano', code: 'it' },
					// { text: 'Português', code: 'pt' },
					// { text: '日本語', code: 'ja' },
					// { text: '한국어', code: 'ko' },
					// { text: 'русский', code: 'ru' },
					// { text: 'العربية', code: 'ar' }, // Arabic
					// { text: 'हिन्दी', code: 'hi' }, // Hindi
					// { text: 'ไทย', code: 'th' }, // Thai
					// { text: 'Türkçe', code: 'tr' }, // Turkish
					// { text: 'Nederlands', code: 'nl' }, // Dutch
					// { text: 'Polski', code: 'pl' }, // Polish
					// { text: 'Svenska', code: 'sv' }, // Swedish
					// { text: 'Magyar', code: 'hu' }, // Hungarian
					// { text: 'Čeština', code: 'cs' }, // Czech
					// { text: 'Dansk', code: 'da' }, // Danish
				    // Add more languages as needed
				]
				// locales: [ {
				// 		text: this.$t('locale.en'),
				// 		code: 'en'
				// 	},
				// 	{
				// 		text: this.$t('locale.zh-hans'),
				// 		code: 'zh-Hans'
				// 	},
				// ],
			}
		},
		onLoad() {

		},
		onShow() {
			this.locale = uni.getLocale()
		},
		methods: {
			setLocales(code){
				this.locale = code
				uni.setLocale(code);
				this.$i18n.locale = code;
			}
		},
	};
</script>

<style scoped lang="scss">
	.cellviewGrop {
		background: #1E1F30;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;

		.cellview {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 110rpx;

			&__left {
				display: flex;
				align-items: center;


				&__title {
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			&__right {
				display: flex;
				align-items: center;

				&__content {
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
	}
</style>